<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS实现日间模式和夜间模式切换</title>
  <style>
    html,
    body,
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background-color: #fff;
    }

    iframe {
      flex: 1;
      width: 100%;
      background-color: #fff;
      transition: all 300ms;
    }

    html.dark {
      filter: invert(1) hue-rotate(180deg);

      img,
      video,
      .avatar,
      .image,
      .thumb {
        filter: invert(1) hue-rotate(180deg);
      }
    }

    html.dark::view-transition-old(root) {
      z-index: 99;
    }

    button {
      width: 100px;
      height: 30px;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-bottom: 5px;
    }

    button:hover {
      background-color: #0056b3;
    }

    button:active {
      background-color: #e0e0e0;
    }

    ::view-transition-new(root),
    ::view-transition-old(root) {
      animation: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>
      <button id="btn">切换主题</button>
    </div>
    <!-- <iframe src="http://10.10.200.135:8082/login?redirect=%2Findex" frameborder="0"></iframe> -->
    <iframe src="https://juejin.cn/post/7490602578011570202"></iframe>
  </div>
  <script>
    document
      .getElementById('btn')
      .addEventListener('click', function (event) {
        toggleTheme(event);
      });

    // 切换主题
    function toggleTheme(event) {
      // 获取 transition API 实例
      const transition = document.startViewTransition(() => {
        document.documentElement.classList.toggle('dark');
      });

      transition.ready.then(() => {
        const { clientX, clientY } = event;

        const radius = Math.hypot(
          Math.max(clientX, innerWidth - clientX),
          Math.max(clientY, innerHeight - clientY),
        );
        const clipPath = [
          `circle(0% at ${clientX}px ${clientY}px)`,
          `circle(${radius}px at ${clientX}px ${clientY}px)`,
        ];
        const isDark = document.documentElement.classList.contains('dark');

        // 自定义动画
        document.documentElement.animate(
          {
            clipPath: isDark ? clipPath.reverse() : clipPath,
          },
          {
            duration: 500,
            pseudoElement: isDark
              ? '::view-transition-old(root)'
              : '::view-transition-new(root)',
          },
        );
      });
    }
  </script>
</body>

</html>